<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<style>
    img {
        width: 100px;
        height: 100px;
    }
    
    .inner {
        padding: 50px 10px 10px;
        border-radius: 0 0 3px 3px;
        background: #fff;
    }
    
    #bcd {
        margin: 5px;
    }
    
    .setpass {
        margin-top: 30px;
    }
</style>

<body>
    <div class="content">
        <!-- 上面的navbar -->
        <div id="header"></div>
        <!-- 下面的主体部分 -->
        <div class="main">
            <div class="maintitle">
                <a href="/index" style="color: #80bd01;">主页</a> / 设置
            </div>
            <form action="http://localhost:8686/setting" method="post" enctype="multipart/form-data" class="inner" role="form">
                <div class="row form-group">
                    <label class="control-label col-lg-1" for="user_name">用户名</label>
                    <div class="col-lg-3 col-md-6">
                        <input class="form-control" name="user_name" id="user_name" type="text" value="{{datas.user_name}}" />
                    </div>
                </div>
                <div class="row form-group">
                    <label class="control-label col-lg-1">头像</label>
                    <div class="col-lg-3 col-md-6">
                        <div id="bcd">
                            <img src="avatar/{{datas.avatar_url}}" alt="" class="avatar" />
                        </div>
                        <input type="button" id="i-check" value="修改头像" class="btn btn-primary" onclick="$('#fileIpt').click();" />

                        <input type="file" name="file" id="fileIpt" style="display: none;" />
                    </div>
                </div>
                <div class="row form-group">
                    <label class="control-label col-lg-1">电子邮箱</label>
                    <div class="col-lg-3 col-md-6">
                        <input class="form-control" name="email" id="email" type="eamil" value="{{datas.email}}" />
                    </div>
                </div>
                <div class="row form-group">
                    <label class="control-label col-lg-1">个性签名</label>
                    <div class="col-lg-3 col-md-6">
                        <textarea class="form-control" name="sign" id="sign" row="3">
{{datas.sign}}</textarea
              >
            </div>
          </div>

          <button type="submit" class="btn btn-primary">保存设置</button>
        </form>

        <div class="maintitle setpass">
          <span>设置密码</span>
        </div>
        <form
          action=""
          method="post"
          class="inner"
          role="form"
          onsubmit="return false"
        >
          <div class="row form-group">
            <label class="control-label col-lg-1" for="user_name"
              >当前密码</label
            >
            <div class="col-lg-3 col-md-6">
              <input
                class="form-control"
                name="oldpass"
                id="oldpass"
                type="password"
              />
            </div>
          </div>

          <div class="row form-group">
            <label class="control-label col-lg-1">新密码</label>
            <div class="col-lg-3 col-md-6">
              <input
                class="form-control"
                name="newpass"
                id="newpass"
                type="password"
              />
            </div>
          </div>

          <button type="submit" class="btn btn-primary" onclick="updatePass()">
            更改密码
          </button>
        </form>
      </div>
    </div>
    <div id="div1" success="{{success}}"></div>

    <script src="js/jquery-3.4.1.min.js"></script>
  </body>
  <script>
    $("#header").load("http://localhost:8686/header");

    var imgSrc = "";
    console.log($("#fileIpt"));
    $("#fileIpt").change(function (e) {
      console.log(111);
      var imgBox = e.target;
      uploadImg($("#bcd"), imgBox);
    });

    function uploadImg(element, tag) {
      var file = tag.files[0];

      if (!/image\/\w+/.test(file.type)) {
        alert("看清楚，这个需要图片！");
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function () {
        // console.log(this.result);
        imgSrc = this.result;
        // var imgs = document.createElement("img");
        $(".avatar").attr("src", imgSrc);
        // element.append(imgs);
      };
    }

    function updatePass() {
      $.ajax({
        url: "http://localhost:8686/updatePass",
        type: "Post",
        data: {
          oldpass: $("#oldpass").val(),
          newpass: $("#newpass").val(),
        },
        success: function (res) {
          if (res) {
            alert("修改密码成功");
            location.reload();
          } else {
            alert("当前密码不正确");
          }
        },
      });
    }
    console.log($("#div1").attr("success"));
    if ($("#div1").attr("success") == "success") {

      alert("修改成功");
      $("#div1").attr("success", "false");
    }
  </script>
</html>